<template>
  <!-- 随机界面的组件 -->
  <!-- 随机的五首歌 -->
  <div class="backgrand_1">
    <ul>
      <li v-bind:title="t1" class="m_1" datasrc="mp3"><img v-bind:src="s1" alt="" width="65" @click="c1"></li>
      <li v-bind:title="t2" class="m_2" datasrc="mp3"><img v-bind:src="s2" alt="" width="90" @click="c2"></li>
      <li v-bind:title="t3" class="m_3" datasrc="mp3"><img v-bind:src="s3" alt="" width="70" @click="c3"></li>
      <li v-bind:title="t4" class="m_4" datasrc="mp3"><img v-bind:src="s4" alt="" width="40" @click="c4"></li>
      <li v-bind:title="t5" class="m_5" datasrc="mp3"><img v-bind:src="s5" alt="" width="120" @click="c5"></li>
      <!-- <li v-for=""></li> -->
    </ul>
    <button type="button" @click="updata">随机点歌</button>
    <!--<div>
          <aplayer autoplay :music="musicL" :float="true" :shuffle="true" :list="musicList" :listFolded="true">
          </aplayer>
        </div>-->

  </div>
</template>

<script>
/* export default {
  name: 'HelloWorld',
  props: {
    msg: String
  }
} */
/*import aplayer from "vue-aplayer";*/
import { data } from '@/play/data';
import { musicList } from '@/play/data';
var t = new Array(5);
var m = new Array(musicList.length);

function Pmusic(d) {
  var l = musicList.length;
  var n = Math.ceil(Math.random() * (l - 1));
  t[d] = n;
  m[n] = m[n] + 1;
}
function ranSong() {
  for (var j = 0; j < musicList.length; j++) {
    m[j] = 0;
  }
  for (var i = 0; i <= 4; i++) {
    Pmusic(i);
    while (m[t[i]] > 1) {//代表这首歌之前就被占用了
      Pmusic(i);
    }
  }
}
ranSong();

console.log(t);
console.log(m);
//s1:musicList[t].pic;
export default {
  /*components: {
    //别忘了引入组件
    aplayer: aplayer
  },*/
  data() {
    return {
      data,
      musicList,
      s1: musicList[t[0]].pic,
      t1: musicList[t[0]].title,
      s2: musicList[t[1]].pic,
      t2: musicList[t[1]].title,
      s3: musicList[t[2]].pic,
      t3: musicList[t[2]].title,
      s4: musicList[t[3]].pic,
      t4: musicList[t[3]].title,
      s5: musicList[t[4]].pic,
      t5: musicList[t[4]].title,
    }
  },
  methods: {
    c1: function () {
      data.musicUrl = musicList[t[0]].src;
      data.musicName = musicList[t[0]].title;
      data.author = musicList[t[0]].artist;
      data.picUrl = musicList[t[0]].pic;
      console.log(data);
    },
    c2: function () {
      data.musicUrl = musicList[t[1]].src;
      data.musicName = musicList[t[1]].title;
      data.author = musicList[t[1]].artist;
      data.picUrl = musicList[t[1]].pic;
      console.log(data);
    },
    c3: function () {
      data.musicUrl = musicList[t[2]].src;
      data.musicName = musicList[t[2]].title;
      data.author = musicList[t[2]].artist;
      data.picUrl = musicList[t[2]].pic;
      console.log(data);
    },
    c4: function () {
      data.musicUrl = musicList[t[3]].src;
      data.musicName = musicList[t[3]].title;
      data.author = musicList[t[3]].artist;
      data.picUrl = musicList[t[3]].pic;
      console.log(data);
    },
    c5: function () {
      data.musicUrl = musicList[t[4]].src;
      data.musicName = musicList[t[4]].title;
      data.author = musicList[t[4]].artist;
      data.picUrl = musicList[t[4]].pic;
      console.log(data);
    },
    updata: function () {
      ranSong();
      this.s1 = musicList[t[0]].pic;
      this.t1 = musicList[t[0]].title;
      this.s2 = musicList[t[1]].pic;
      this.t2 = musicList[t[1]].title;
      this.s3 = musicList[t[2]].pic;
      this.t3 = musicList[t[2]].title;
      this.s4 = musicList[t[3]].pic;
      this.t4 = musicList[t[3]].title;
      this.s5 = musicList[t[4]].pic;
      this.t5 = musicList[t[4]].title;
    }
  }
}

</script>

<style>
/*编码语言*/
@charset "utf-8";

/*背景图片*/
.backgrand_1 {
  width: 100%;
  height: 100%;
  opacity: 0.8;
  background-image: linear-gradient(to right top, rgb(64, 158, 255) rgb(173, 161, 66));
  /*属性值无效？？？*/
  position: relative;
  /*相对定位，让子元素相对于它定位*/
  /* box-shadow: 10px 10px 10px; */
}

/*设置列表*/
.backgrand_1 ul li {
  list-style: none;
  display: inline-block;
  position: absolute;
}

/*操作图片*/
.backgrand_1 ul li img {
  border-radius: 50%;
  cursor: pointer;
  /*鼠标变手势*/
}

.m_1 {
  top: 30px;
  left: 90px;
}

.m_2 {
  top: 160px;
  left: 140px;
}

.m_3 {
  top: 67px;
  left: 308px;
}

.m_4 {
  top: 50px;
  left: 500px;
}

.m_5 {
  top: 160px;
  left: 560px;
}

button {
  background: #3498db;
  background-image: linear-gradient(to bottom, #3498db, #2980b9);
  border-radius: 28px;
  font-family: Arial;
  color: white;
  font-size: 20px;
  padding: 10px 20px 10px 20px;
  text-decoration: none;
  margin-top: 360px;
  margin-left: 320px;
}

button:hover {
  background: #3cb0fd;
  background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
  text-decoration: none;
  margin-top: 360px;
  margin-left: 320px;
}
</style>
